<template>
	<view class="main_contain">
		<view class="title">
			<text>{{shopName}}</text>
		</view>
		<uni-section title="商店环镜" titleFontSize="35rpx" type="line"></uni-section>
		<view class="shop_env">
			<view class="miaoshu">
				<text>{{shopEnv}}</text>
			</view>
			<view class="boxWrap" v-for="(item, index) in shopEnvList">
				<image  :src="item.url"></image>
			</view>
		</view>
		<uni-section title="商店特色" titleFontSize="35rpx" type="line"></uni-section>
		<view class="shop_detail">
			<view class="miaoshu">
				<text>{{shopDetails}}</text>
			</view>
			<view class="boxWrap" v-for="(item, index) in shopDetailsList">
				<image  :src="item.url"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import { getShopById } from "@/api/shop/shop.js"
	import config from '@/config'
	
	export default {
	  data() {
	    return {
		  rateValue:0,
		  shopData:{},
		  shopDetailsList:[],
		  shopEnvList:[],
		  shopDetails:'',
		  shopEnv:'',
		  shopName:'',
		  item: {
					id: 1,
					mainImage: '/static/images/banner2.jpg',
					totalTime: '00:59:38',
					title: 'uni-applws项目！',
					nickName: 'lws',
					isFree: 0, // 是否收费0收费，1免费
					priceOriginal: 999, // 原价
					priceDiscount: 599, // 优惠价
					studyTotal: 399
		  		}
	    }
	  },
	  onLoad(option) {
		  console.log(option.id);
	    this.getData(option.id)
	  },
	  methods: {
	    getData(id) {
	      getShopById(id).then(response => {
			  console.log(response);
			  this.shopDetailsList=response.data.shopDetailsList;
			  this.shopEnvList=response.data.shopEnvList;
			  this.shopDetails=response.data.shopDetails;
			  this.shopEnv=response.data.shopEnv;
			  this.shopName=response.data.shopName;
			  // 使用for...of循环遍历对象数组
			  for (let obj of this.shopDetailsList) {
			      obj.url=config.minioUrl+'/'+obj.url;
			  }
			  for (let obj of this.shopEnvList) {
			      obj.url=config.minioUrl+'/'+obj.url;
			  }	
	      })
	    },
		onChange(e)
		{
			console.log(e);
		}
	  }
	}
</script>

<style lang="scss">
	
	.main_contain{
		background-color: rgb(255,255,255);
		 overflow: hidden;
		.title{
			text-align: center;
			margin-top: 20rpx;
		}
		// font-size: 20rpx;
	}
	image{
		width: 700rpx;
		margin: 5rpx;
	}
	.miaoshu{
		font-size: 25rpx;
	}
	.boxWrap {
      // width: 730rpx;
      // height: 500px;
      margin: 20rpx;
      background: radial-gradient(circle at center center, rgba(25, 25, 112, 0), rgba(25, 25, 112, 0)),
        linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) left top,
        linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) left top,
        linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) right top,
        linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) right top,
        linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) left bottom,
        linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) left bottom,
        linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) right bottom,
        linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) right bottom,
        linear-gradient(rgba(56, 144, 184, 0.60), rgba(56, 144, 184, 0.60)) top,
        linear-gradient(rgba(26, 87, 130, 0.60), rgba(26, 87, 130, 0.60)) bottom,
        linear-gradient(rgba(56, 144, 184, 0.60), rgba(219, 240, 255, 0.80), rgba(26, 87, 130, 0.60)) left,
        linear-gradient(rgba(56, 144, 184, 0.60), rgba(219, 240, 255, 0.80), rgba(26, 87, 130, 0.60)) right;
      background-repeat: no-repeat;
      background-position: 1px 1px, 0px 0px, 0px 0px, 0px 100%, 0px 100%, 100% 0px, 100% 0px, 100% 100%, 100% 100%, 0px 0px, 0px 100%, 0px 100%, 100% 100%;
      background-size: calc(100% - 2px) calc(100% - 2px), 1px 10px, 10px 1px, 1px 10px, 10px 1px, 1px 10px, 10px 1px, 1px 10px, 10px 1px, 100% 1px, 100% 1px, 1px 100%, 1px 100%;

    }
</style>